<template>
  <div class="video-wrap" >
    <div v-if="type == 2">
      <van-search placeholder="请输入搜索关键词" v-model="value" />
    <van-swipe :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img v-lazy="image" />
      </van-swipe-item>
    </van-swipe>
    <div class="plank">
      <div class="plank-header">
        <h3>每日必看 - 心灵鸡汤</h3>
      </div>
      <div class="plank-container day">
        <div v-for="(item,index) in day" :key="index" >
          <router-link :to="{name: item.linkName}">
          <img :src="item.avatar">
          <div class="info">
            <h3>{{ item.title }}</h3>
            <h3>{{ item.sort }}</h3>
          </div>
          </router-link>
        </div>
      </div>
    </div>
    <div class="plank">
      <div class="plank-header clearfix">
        <div class="l">
          <h3>最新上线</h3>
        </div>
        <div class="r">
          换一换
        </div>
      </div>
      <div class="plank-container goods-wrap">
        <div class="goods" v-for="(item,index) in goods" :key="index">
          <div class="avatar">
            <img :src="item.avatar">
          </div>
          <div class="goods-info">
            <p style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{ item.title }}</p>
            <p><van-image
                    width="15px"
                    height="15px"
                    src="https://img.yzcdn.cn/vant/cat.jpeg"
                    style="vertical-align:middle"
                    round
                  />
                  讲师</p>
          </div>
        </div>
        
      </div>
    </div>
    <div class="plank">
      <div class="plank-header">
        <h3>畅销课程-大家都在看</h3>
      </div>
      <div class="plank-container">
        <div style=""></div>
      </div>
    </div>

    </div>
    <h2 style="line-height: 100vh;text-align: center;" v-if="type == 3" >
      暂未开放...
    </h2>
    <c-footer></c-footer>
  </div>
</template>

<script>
export default {
  name: 'Video',
  data(){
    return {
      value: null,
      type: 3,
      images:[],
      goods:[],
      day:[
        {
          title:'清晨激情',
          sort:'#励志课程',
          avatar:'http://ymshosss.oss-cn-shanghai.aliyuncs.com/GECZcphp1odsn51569403808190925.jpg',
          linkName:'videoclassifyvideo'
        },
        {
          title:'夜晚安心',
          sort:'#心态课程',
          avatar:'http://ymshosss.oss-cn-shanghai.aliyuncs.com/lkCp0phpv5VACD1569403752190925.jpg',
          linkName:'videoclassifyarticle'
        }
      ]
    }
  },
  created(){
    this.getData();
    
  },
  methods:{
    async getData(){
      await this.axios.get('/mock/15dab388002f774ea661f1f9763c52d5/user01/xljt').then(res=>{
      this.images = res.data.images.index;
      this.goods = res.data.images.goods;
    }).catch(err=>{
      console.log(err);
    })
    }
  }
}
</script>
<style lang="less" scoped>
.video-wrap {
  padding-bottom: 50px;
  .plank-header h3 {
    margin: 0;
    padding: 10px 0;
  }
  .day {
    display: grid;
    grid-template-columns: 1fr 1fr;
    div {
      position: relative;
      .info {
        position: absolute;
        top: 25%;
        left: 0;
        right: 0;
        h3 {
          text-align: center;
          color: white;
          font-weight: 400;
          margin: 0;
        }
      }
    }
    div {
      height: 100px;
      padding: 5px 7px;
      img {
        border-radius: 6px;
        height: 100%;
        width: 100%;
      }
    }
  }
  .goods-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    .goods {
      display: block;
      width: 100%;
      .avatar {
        width: 115px;
        height: 115px;
        margin: 0 auto;
        img {
          height: 100%;
          width: 100%;
        }
      }
      .goods-info {
        width: 100%;
        p {
          margin: 0;
        }
      }
    }
  }
}

</style>